Error Boundary

子Componentのrendering時に、errorが発生した際に、fallbackを提供する

実行時errorが起きた時に、代替表示をする

だから画面全体が真っ白になるわけではない

ラベルとしては、以下のようなclass Componentのことを「Error Boundary」と呼ぶ

または両方を定義したclass Component

Reaact v17の時点では、classにしか対応していない

FC及びhooksを使っては書けない

何が嬉しいか

子Componentはerrorがなかったときの処理に集中できる

複数のComponentのerrorをまとめて処理したい場合に書くのが簡単

ErrorBoundaryで囲う粒度

一番rootに一つだけ書いても良いし、細かく刻んでも良い

仮にproject全体を1箇所だけしか囲わなかった場合、

sidebarやfooterの一部でerrorがで起きただけなのに、project全体でfallbackが表示されることになる

code:ts

ReactDOM.render(

<ErrorBoundary>

<App />

</ErrorBoundary>,

document.getElementById("root")

);

methods

static getDerivedStateFromError()

fallback UIをrenderingする為に使う

componentDidCatch()

error情報をlogに記録するために使う

例

errorを補足し、fallbackを返すComponentをclassで定義する

code:ts

class ErrorBoundary extends React.Component {

constructor(props) {

super(props);

this.state = { hasError: false };

}

// これ

componentDidCatch(error, info) {

this.setState({ hasError: true });

logErrorToMyService(error, info);

}

render() {

if (this.state.hasError) {

// fallback用のUI

return <h1>errorが発生しました</h1>;

}

return this.props.children;

}

}

捕捉したいまとまりを囲んで使う

code:ts

<A>

<B/>

<ErrorBoundary1>

<C/>

<ErrorBoundary2>

<D/>

<E/>

</ErrorBoundary2>

<ErrorBoundary3>

<F />

</ErrorBoundary3>

</ErrorBoundary1>

<A/>

Bでerrorになった場合は、補足されない

CやErrorBoundery2自身がerrorになった場合は、ErroBoundary1がfallbackする

Dでerrorになった場合は、DとEが一緒にfallbackされる

Fでerrorになった場合は、Eのみでfallbackされる。B,C,D,Eなどには影響がない